<template>
  <view class="pad20 relative container bg-white">
    <sb-back-icon></sb-back-icon>
    <scroll-view
      scroll-y
      class="radius10 address-content"
      v-if="siteList.length"
      @scrolltolower="reachBottom()"
    >
      <u-swipe-action
        :index="index"
        v-for="(res, index) in siteList"
        :key="res.id"
        :show="res.show"
        @click="(index) => click(index, res)"
        @open="open"
        :options="options"
      >
        <view class="item pad20" @click="selectAddress(res)">
          <view class="top">
            <view class="name">{{ res.name }}</view>
            <view class="phone">{{ res.tel }}</view>
            <view class="tag" v-if="res.first === 1">
              <text class="red">默认</text>
            </view>
          </view>
          <view class="bottom">
            {{ res.region }} {{ res.address }}
            <u-icon
              name="edit-pen"
              :size="40"
              color="#999999"
              @click.native.stop="toAddSite(res)"
            ></u-icon>
          </view>
        </view>
        <sb-line v-if="index < siteList.length - 1" />
      </u-swipe-action>
    </scroll-view>
    <sb-empty class="h100" v-else />
    <view class="addSite" @click="toAddSite">
      <view class="add">
        <u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>Add
        New Address
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      id: 0,
      siteList: [],
      show: false,
      // 是否从下单页面而来
      fromOrder: 0,
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      params: {
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  onPullDownRefresh() {
    this.params.pageIndex = 1;
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
    this.getAddressList();
  },
  onLoad: function ({ fromOrder }) {
    if (!this.$checkLogin()) return this.$redirect2Login();
    if (fromOrder) this.fromOrder = fromOrder;
    // 来进行调用列表项的接口
  },
  onShow() {
    this.getAddressList();
  },
  methods: {
    ...mapMutations(["SET_ADDRESS"]),
    reachBottom() {
      this.params.pageIndex += 10;
      this.getAddressList();
    },
    selectAddress(item) {
      if (this.fromOrder) {
        this.SET_ADDRESS(item);
        this.$go2("/pages/main/order/detail");
      }
    },
    async click(index, item) {
      await this.$confirm("确认删除?");

      let { success } = await this.$postB("/cus-address/del", {
        id: item.id,
      });
      if (success)
        this.$msg("删除成功", () => {
          this.getAddressList();
        });
    },

    open(index) {
      this.siteList[index].show = true;
      this.siteList.map((val, idx) => {
        if (index != idx) this.siteList[idx].show = false;
      });
    },
    toAddSite(res) {
      uni.navigateTo({
        url: "/pages/main/address/edit" + (res.id ? "?id=" + res.id : ""),
      });
    },

    async getAddressList() {
      let {
        success,
        data: { rows },
      } = await this.$get("/cus-address/list", this.params);

      //加入show
      rows.forEach((item) => {
        item.show = false;
      });

      if (success)
        this.siteList =
          this.params.pageIndex > 1 ? this.siteList.concat(rows) : rows;
      console.log(this.siteList);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  .item {
    background: #fff;
    // border-bottom: 1px solid #ccc;
    .top {
      display: flex;
      font-size: 34rpx;
      .phone {
        margin-left: 60rpx;
      }
      .tag {
        display: flex;
        font-weight: normal;
        align-items: center;
        text {
          display: block;
          width: 60rpx;
          height: 34rpx;
          line-height: 34rpx;
          color: #ffffff;
          font-size: 20rpx;
          border-radius: 6rpx;
          text-align: center;
          margin-left: 30rpx;
          background-color: rgb(49, 145, 253);
        }
        .red {
          background-color: red;
        }
      }
    }
    .bottom {
      display: flex;
      margin-top: 20rpx;
      font-size: 28rpx;
      justify-content: space-between;
      color: #999999;
    }
  }
}

.addSite {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 20rpx;
  left: 80rpx;
  background-color: red;
  border-radius: 60rpx;
  font-size: 30rpx;
  .add {
    display: flex;
    align-items: center;
    color: #ffffff;
    .icon {
      margin-right: 10rpx;
    }
  }
}
.address-content {
  height: 90%;
  overflow: auto;
}
</style>
